import {useSelector, useDispatch} from "react-redux"
import numStatus from '@/store/NumStatus'
// import store from "@/store"
// // ts提供RootState 获取函数类型返回值
// type RootState = ReturnType<typeof store.getState>

import { Button } from "antd";
function Page1(){
    const dispatch = useDispatch()
    // 对number操作
    // 获取仓库数据
    const {number, sarr} = useSelector((state:RootState)=>(
        {
            number: state.NumStatusReducer.number,
            sarr: state.ArrStatusReducer.sarr
        }
    ))
    // 修改仓库函数
    const changeNumber = () => {
        // dispatch({type:"函数名",value:xx})
        dispatch({type:"add2",value:5})
    }
    const changeNumber2 = () => {
        // 同步的写法
        // dispatch({type:"add3",value:5})
        // 异步的写法 redux-thunk dispatch(异步函数)
        // dispatch((dis:Function)=>{
        //     setTimeout(()=>{
        //         dis({type:"add1"})
        //     },1000)
        // })
        dispatch(numStatus.asyncActions.asyncAdd2)
    }

    const changeSarr = () => {
        dispatch({type:"sarrpush",value:5})
    }
    return (
        <div>
            <p className="Page1">Page1</p>
            <p>{number}</p>
            <Button  type="primary" onClick={changeNumber}>改number</Button>
            <Button  type="primary" onClick={changeNumber2}>异步</Button>

            <p>{sarr}</p>
            <Button  type="primary" onClick={changeSarr}>sarr</Button>
        </div>
    )
}
export default Page1